<template>
    <el-card class="card-with-gradient">
        <el-form :inline="true">
            <el-form-item>
                <el-button size="large" type="success" @click="selectAllProfessional()">添加</el-button>
                <el-button type="success" :icon="Download" circle @click="downloadStudent" style="margin-right: 10px;">
                    <el-icon>
                        <Download />
                    </el-icon>
                </el-button>
                <el-upload :on-success="uploadStudent" action="http://localhost:8080/admin/upload/upload1"
                    :headers="headers" method="post" name="file" list-type="none" :show-file-list="false">
                    <el-button type="warning" :icon="UploadFilled" circle>
                        <el-icon>
                            <Upload />
                        </el-icon>
                    </el-button>
                </el-upload>
            </el-form-item>
            <el-form-item style="float: right">
                <el-col :span="12">
                    <el-input v-model="sname" placeholder="请输入姓名关键字" clearable @input="selectByPage(1)" maxlength="20"
                        style="width: 200px; margin-right: 20px;" />
                </el-col>
                <el-col :span="12">
                    <el-input v-model="sgender" placeholder="请输入性别关键字" clearable @input="selectByPage(1)" maxlength="20"
                        style="width: 200px;" />
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="pageInfo.list" style="width: 100%">
            <el-table-column prop="sid" label="ID" width="80px" />
            <el-table-column prop="sno" label="编号" />
            <el-table-column prop="sname" label="姓名" />
            <el-table-column prop="sgender" label="性别" />
            <el-table-column prop="sbirthday" label="入学时间" />
            <el-table-column prop="sclass" label="班级" />
            <el-table-column prop="college.professional" label="专业名称" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" color="blue" @click="selectBySid(scope.row.sid)" />
                    <el-popconfirm title="你确认要删除嘛" confirm-button-text="确认" cancel-button-text="取消" width="200px"
                        @confirm="deleteStudent(scope.row.sid)">
                        <template #reference>
                            <el-button type="primary" :icon="Delete" color="red" @click="console.log(scope.row.sid)" />
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-row class="row-bg" justify="center" style="margin-top: 40px;">
            <el-pagination background layout="prev, pager, next" v-model:current-page="pageInfo.pageNum"
                :page-count="pageInfo.pages" @update:current-page="selectByPage" />
        </el-row>
    </el-card>


    <!-- 添加学生的对话框开始 -->
    <el-dialog v-model="addDialogShow" title="新增学生" width="500">
        <el-form :model="form" label-width="20%">
            <el-form-item label="编号">
                <el-input autocomplete="off" v-model="studentAdd.sno" style="width: 300px" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input autocomplete="off" v-model="studentAdd.sname" style="width: 300px" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="studentAdd.sgender" style="width: 300px">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="入学时间">
                <el-date-picker v-model="studentAdd.sbirthday" type="date" placeholder="请选择入职时间" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="班级">
                <el-input autocomplete="off" v-model="studentAdd.sclass" style="width: 300px" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input autocomplete="off" v-model="studentAdd.spassword" style="width: 300px" />
            </el-form-item>
            <el-form-item label="专业">

                <el-select v-model="studentAdd.zid" placeholder="请选择所在专业" style="width: 300px">
                    <el-option v-for="(college, index) in allProfessional" :key="index" :label="college.professional"
                        :value="college.zid" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addDialogShow = false">取消</el-button>
                <el-button @click="insert()">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 添加学生的对话框结束 -->

    <!-- 修改学生的对话框开始 -->
    <el-dialog v-model="updateDialogShow" title="修改学生" width="500">
        <el-form :model="form" label-width="20%">
            <el-form-item label="编号">
                <el-input autocomplete="off" v-model="studentUpdate.sno" style="width: 300px" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input autocomplete="off" v-model="studentUpdate.sname" style="width: 300px" />
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="studentUpdate.sgender" style="width: 300px">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="入学时间">
                <el-date-picker v-model="studentUpdate.sbirthday" type="date" placeholder="请选择入职时间" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" style="width: 300px" />
            </el-form-item>
            <el-form-item label="班级">
                <el-input autocomplete="off" v-model="studentUpdate.sclass" style="width: 300px" />
            </el-form-item>
            <el-form-item label="密码(已加密)">
                <el-input autocomplete="off" v-model="studentUpdate.spassword" style="width: 300px" />
            </el-form-item>
            <el-form-item label="专业">

                <el-select v-model="studentUpdate.zid" placeholder="请选择所在专业" style="width: 300px">
                    <el-option v-for="(college, index) in allProfessional" :key="index" :label="college.professional"
                        :value="college.zid" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="updateDialogShow = false">取消</el-button>
                <el-button @click="update()">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- 修改学生的对话框结束 -->
</template>

<script setup>
import studentApi from '@/api/studentApi';
import { ref ,reactive} from 'vue';
import { ElLoading } from 'element-plus';
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import departmentApi from '@/api/departmentApi';
import { ElMessage, ElMessageBox } from 'element-plus'//删除按钮特效
const sname = ref('')//用于右上角的查询
const sgender = ref('')//用于右上角的查询
const pageInfo = ref({//保存信息，用于遍历
    total: 0,
    size: 0,
    pageNum: 0,
})
const addDialogShow = ref(false)//操作新增的弹框出现
const updateDialogShow = ref(false);//操作修改的弹框出现
const allProfessional = ref([])//所有的学院
//被添加学生的信息
//eid estatic不需要前端设置
const studentAdd = ref({
    sno: "",
    sname: "",
    sgender: "男",
    sbirthday: "",
    sclass: "",
    spassword: "",
    zid: ""
});


const headers = reactive({
    token: sessionStorage.getItem('token')
});



// 定义方法查询所有部门并显示增加员工对话框
function selectAllProfessional() {
    departmentApi.selectAll()
        .then(resp => {
            //console.log(resp.data)
            allProfessional.value = resp.data
            addDialogShow.value = true
        })
}
//查询所有部门
function selectProfessional() {
    departmentApi.selectAll()
        .then(resp => {
            //console.log(resp.data)
            allProfessional.value = resp.data
        })
}
//确认添加数据
function insert() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    studentApi.insert(studentAdd.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //隐藏
                addDialogShow.value = false
                //清空
                studentAdd.value = {
                    sno: "",
                    sname: "",
                    sgender: "男",
                    sbirthday: "",
                    sclass: "",
                    spassword: "",
                    zid: ""
                }
                //刷新表格
                //refreshCurrentPage()
                selectByPage(1)
            } else {
                //弹出消息
                ElMessage.error(resp.msg)
            }
        })
}
//修改过程--双重绑定的交点
const studentUpdate = ref({
    sid: "",
    sno: "",
    sname: "",
    sgender: "男",
    sbirthday: "",
    sclass: "",
    spassword: "",
    zid: ""
});
//定义方法查询学生信息，回显数据
function selectBySid(sid) {
    studentApi.selectBySid(sid)
        .then(resp => {
            console.log(resp);
            selectProfessional()

            studentUpdate.value = resp.data
            //展示修改模态框
            updateDialogShow.value = true;
        })
}
//确认修改数据
function update() {
    const loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    studentApi.update(studentUpdate.value)
        .then(resp => {
            loading.close()
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                //弹出消息
                ElMessage.success(resp.msg)
                //隐藏
                updateDialogShow.value = false
            } else {
                //弹出消息
                ElMessage.error(resp.msg)
            }
            selectByPage(1)
        })
}

//刷新页面--原方法已更新，永原来的
// function refreshCurrentPage() {
//     const urlParams = new URLSearchParams(window.location.search);
//     const currentPage = parseInt(urlParams.get('page')) || 1;
//     location.reload();
// }

//删除的特效
function deleteStudent(sid) {
    studentApi.delete(sid)
        .then(resp => {
            const loading = ElLoading.service({
                lock: true,
                text: 'Loading',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            //判断---弹出消息--刷新表格
            if (resp.code == 10000) {
                loading.close()
                //弹出消息
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                    duration: 1200
                });
                refreshCurrentPage()
            } else {
                //弹出消息
                ElMessage({
                    message: '删除失败',
                    type: 'error',
                    duration: 2000
                });
            }
        })

}

//定义方法接受数据
function selectByPage(pageNum) {
    studentApi.selectByPage(pageNum, sname.value, sgender.value)
        .then(resp => {
            //console.log(pageNum);
            console.log(resp.data);
            pageInfo.value = resp.data
        })
}

selectByPage(1)


//下载
function downloadStudent() {
    studentApi.download()
        .then(resp => {
            let blob = new Blob([resp], { type: 'application/xlsx' });
            let url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = "全体学生注册信息表.xlsx";
            link.click();
            URL.revokeObjectURL(url);
        })
}

//上传
function uploadStudent(response) {
    if (response.code == 10000) {
        selectByPage(1);
        ElMessage.success("上传成功");
    } else {
        ElMessage.error(response.msg);
    }

}




</script>

<style scoped>
.avatar-uploader,
.avatar {
    width: 149px;
    height: 149px;
    display: block;
    border: 1px dotted #dcdfe6;
    border-radius: 5px;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 149px;
    height: 149px;
    text-align: center;
}

.card-with-gradient {
    background: linear-gradient(to right, rgb(233, 181, 85), rgb(244, 83, 156));
    /* 添加一些基本的样式来美化卡片 */
    border-radius: 8px;
    /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 阴影 */
    color: white;
}
</style>